// 导入 Flutter 框架的 Material 设计库
import 'package:flutter/material.dart';
// 导入自定义的导航栏项组件
import 'package:flutterDemo/common_ui/navigation/navigation_bar_item.dart';

/// 自定义底部导航栏组件
///
/// 该组件用于创建一个带有多个页面切换功能的底部导航栏。
/// 它接收多个参数，包括页面列表、标签列表、图标列表等，用于构建导航栏的各个部分。
/// 注意：该类被标记为 `must_be_immutable`，表示它的属性在创建后不可变。
// ignore: must_be_immutable
class NavigationBarWidget extends StatefulWidget {
  /// 创建一个 [NavigationBarWidget] 实例。
  ///
  /// [key] 用于标识该组件，[pages] 是页面列表，[labels] 是标签列表，
  /// [icons] 是切换前图标列表，[activeIcons] 是切换后图标列表，
  /// [onTapChange] 是点击切换时的回调函数，[currentIndex] 是当前选中的索引。
  /// 如果传入的数组长度不一致，会抛出异常。
  NavigationBarWidget(
      {super.key,
      required this.pages,
      required this.labels,
      required this.icons,
      required this.activeIcons,
      this.onTapChange,
      this.currentIndex}) {
    // 检查传入的数组长度是否一致，如果不一致则抛出异常
    if (pages.length != labels.length &&
        pages.length != icons.length &&
        pages.length != activeIcons.length) {
      throw Exception("数组长度必须保持一致");
    }
  }

  /// 页面列表，每个元素对应导航栏的一个页面
  final List<Widget> pages;

  /// 标签列表，每个元素对应导航栏的一个标签
  final List<String> labels;

  /// 切换前图标列表，每个元素对应导航栏未选中状态的图标
  final List<Widget> icons;

  /// 切换后图标列表，每个元素对应导航栏选中状态的图标
  final List<Widget> activeIcons;

  /// 点击切换时的回调函数，接收当前选中的索引作为参数
  final ValueChanged<int>? onTapChange;

  /// 当前选中的索引
  int? currentIndex;

  @override
  State<StatefulWidget> createState() {
    // 创建并返回该组件的状态类实例
    return _NavigationBarWidgetState();
  }
}

/// [NavigationBarWidget] 的状态类
///
/// 该类负责管理 [NavigationBarWidget] 的状态，并构建其 UI。
class _NavigationBarWidgetState extends State<NavigationBarWidget> {
  @override
  Widget build(BuildContext context) {
    // 返回一个 Scaffold 组件，包含一个 IndexedStack 作为主体内容和一个 BottomNavigationBar 作为底部导航栏
    return Scaffold(
        // 使用 SafeArea 包裹 IndexedStack，确保内容不会被系统状态栏或底部导航栏遮挡
        body: SafeArea(
            child: IndexedStack(
          // 根据当前选中的索引显示对应的页面
          index: widget.currentIndex ?? 0,
          // 传入页面列表
          children: widget.pages,
        )),
        // 使用 Theme 组件自定义底部导航栏的样式，去除点击时的水波纹效果
        bottomNavigationBar: Theme(
          data: Theme.of(context).copyWith(
              // 去除点击时的水波纹
              splashColor: Colors.transparent,
              // 去除高亮时的水波纹
              highlightColor: Colors.transparent),
          child: BottomNavigationBar(
              // 设置导航栏类型为固定类型
              type: BottomNavigationBarType.fixed,
              // 设置选中项的文本颜色
              selectedItemColor: Colors.black,
              // 设置未选中项的文本颜色
              unselectedItemColor: Colors.grey,
              // 设置当前选中的索引
              currentIndex: widget.currentIndex ?? 0,
              // 传入导航栏项列表
              items: _barItemList(),
              onTap: (index) {
                // 点击切换页面
                widget.currentIndex = index;
                // 调用点击切换时的回调函数
                widget.onTapChange?.call(index);
                // 更新页面状态
                setState(() {});
              }),
        ));
  }

  /// 生成底部导航栏项列表
  ///
  /// 该方法根据传入的标签、图标和激活图标列表生成底部导航栏的项列表。
  /// 返回一个包含 [BottomNavigationBarItem] 的列表。
  List<BottomNavigationBarItem> _barItemList() {
    // 初始化一个空列表，用于存储导航栏项
    List<BottomNavigationBarItem> items = [];
    // 遍历页面列表，为每个页面创建一个导航栏项
    for (int i = 0; i < widget.pages.length; i++) {
      items.add(BottomNavigationBarItem(
          // 设置导航栏项的标签
          label: widget.labels[i],
          // 设置导航栏项未选中状态的图标
          icon: widget.icons[i],
          // 设置导航栏项选中状态的图标，并使用自定义的 NavigationBarItem 组件添加动画效果
          activeIcon: NavigationBarItem(
            builder: (context) {
              return widget.activeIcons[i];
            },
          )));
    }
    // 返回导航栏项列表
    return items;
  }
}
